import React , { useState } from "react";
import { StyleSheet, Text, View,ScrollView, Button } from "react-native";
import TextInputMask,{mask,unmask,setMask} from 'react-native-text-input-mask';
import { Colors } from "react-native/Libraries/NewAppScreen";
export const TextInputTest = () => {
    const [maskTest, maskValue] = useState('');
    const a = () => {
        mask("+1 ([000]) [000] [00] [00]", "13343468815", true).then(res => {
            maskValue(res)
        }).catch(err => {
            console.log('error', err)
        })
    }

    const [unmaskTest, unmaskValue] = useState('');
    const b = () => {
        unmask("+1 ([000]) [000] [00] [00]", "13343468815", true).then(res => {
            unmaskValue(res)
        }).catch(err => {
            console.log('error', err)
        })
    }

    const [setmaskTest, setmaskValue] = useState('');
    const c = () => {
        setMask(1, "+1 334 346 88 15", { autocomplete: true, autoskip: true ,rightToLeft:true})
    }
    const [onChangeTextTest_formatted, setonChangeTextValue_formatted] = useState('');
    const [onChangeTextTest_extracted, setonChangeTextValue_extracted] = useState('');
    const dd = (formatted: string, extracted: string|undefined) => {
        console.log("formatted", formatted)
        setonChangeTextValue_formatted(formatted)
        console.log("extracted", extracted)
        if(extracted){
            setonChangeTextValue_extracted(extracted)
        }
    }
    return (
        <ScrollView style={{ flex: 1 }}>

            <View style={styles.container}>
                <Text style={styles.label}>Phone Number:</Text>
                <Button
                    title="mask"
                    onPress={a}
                />
                <Text style={styles.input}>
                    {maskTest}
                </Text>
            </View>
            <View style={styles.container}>
                <Text style={styles.label}>Phone Number:</Text>
                <Button
                    title="unmask"
                    onPress={b}
                />
                <Text style={styles.input}>
                    {unmaskTest}
                </Text>
            </View>
            <View style={styles.container}>
                <Text style={styles.label}>Phone Number:</Text>
                <Button
                    title="setmask"
                    onPress={c}
                />
            </View>
                     <View style={styles.container}>
                            <Text style={styles.label}>Phone Number:</Text>
                            <Button
                                title="setmask"
                                onPress={c}
                            />
                        </View>
                                 <View style={styles.container}>
                                        <Text style={styles.label}>Phone Number:</Text>
                                        <Button
                                            title="setmask"
                                            onPress={c}
                                        />
                                    </View>
                                             <View style={styles.container}>
                                                    <Text style={styles.label}>Phone Number:</Text>
                                                    <Button
                                                        title="setmask"
                                                        onPress={c}
                                                    />
                                                </View>
                      <View style={styles.container}>
                            <Text style={styles.label}>Phone Number:</Text>
                            <TextInputMask
                                rightToLeft ={true}
                                onChangeText={dd}
                                affinityCalculationStrategy="PREFIX"
                                style={styles.input}
                                autoComplete="nickname"
                                mask={"+7 [000] [000]"} // Define your mask here
                                placeholder="Enter phone number"
                            />
                            <Text style={styles.input}>
                                {onChangeTextTest_formatted}
                            </Text>
                            <Text style={styles.input}>
                                {onChangeTextTest_extracted}
                            </Text>
                        </View>
        </ScrollView>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 16,
    },
    label: {
        color:Colors.white,
        fontSize: 16,
        marginBottom: 8,
    },
    input: {
        height: 40,
        color:Colors.white,
        borderColor: '#ccc',
        borderWidth: 1,
        paddingHorizontal: 8,
    },
});

export default TextInputTest;